<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表的过滤</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord"/>
			<ul>
				<li v-for="(person,index) in filPerson":key="person.id" >
					{{index}} - {{person.name}} - {{person.age}} - {{person.sex}}
				</li>
			</ul>
			
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false
			 
			// new Vue({
			// 	el:"#root",
			// 	data:{
			// 		keyWord:"",
			// 		persons:[
			// 			{
			// 				id:"001",
			// 				name:"马冬梅",
			// 				age:18,
			// 				sex:"女"
			// 			},
			// 			{
			// 				id:"002",
			// 				name:"周冬雨",
			// 				age:19,
			// 				sex:"女"
			// 			},
			// 			{
			// 				id:"003",
			// 				name:"周杰伦",
			// 				age:20,
			// 				sex:"男"
			// 			},
			// 			{
			// 				id:"004",
			// 				name:"温兆伦",
			// 				age:20,
			// 				sex:"男"
			// 			}
						
			// 		],
			// 		filPerson:[]
			// 	},
				// 使用 watch进行实现
				//  watch:{
				// 	// keyWord(val){
				// 	// 	this.filPerson = this.persons.filter((person)=>{
				// 	// 		return person.name.indexOf(val) != -1;
				// 	// 	})
				// 	// }
				// 	keyWord:{
				// 		immediate:true,
				// 		handler(val){
				// 			this.filPerson = this.persons.filter((person)=>{
				// 				return person.name.indexOf(val) != -1
				// 			})
				// 		}
				// 	}
				// }
			// })
			   // 使用 computed实现
			   new Vue({
				   el:"#root",
				   data:{
				   		keyWord:"",
				   		persons:[
				   			{
				   				id:"001",
				   				name:"马冬梅",
				   				age:38,
				   				sex:"女"
				   			},
				   			{
				   				id:"002",
				   				name:"周冬雨",
				   				age:19,
				   				sex:"女"
				   			},
				   			{
				   				id:"003",
				   				name:"周杰伦",
				   				age:20,
				   				sex:"男"
				   			},
				   			{
				   				id:"004",
				   				name:"温兆伦",
				   				age:28,
				   				sex:"男"
				   			}
				   			
				   		]
					},
					computed:{
						filPerson(){
							return this.persons.filter((p)=>{
								return p.name.indexOf(this.keyWord) != -1;
							})
						}
					
					}
					
			   })
			
		</script>
	</body>
</html>
